@layout("/common/_container.html"){
<link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>实时数据管理</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <h4>实时数据可能延迟1-2分钟</h4>
                    <div class="layui-row" style="margin-top: 30px;">
                        <div class="layui-col-xs3">
                            <div class="layui-bg-blue"
                                 style="margin-left: 10px;
                                    height: 120px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center">
                                <div>注册用户数</div>
                                <h3 id="regCount" style="margin-top: 5px;margin-bottom: 5px;">0</h3>
                                <div style="display: flex;flex-direction: row;">
                                    日增长<label id="regIncreaseRatio" style="margin-left: 5px;">0%</label>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs3">
                            <div class="layui-bg-blue"
                                 style="margin-left: 10px;
                                    height: 120px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center">
                                <h5>上线用户数</h5>
                                <h3 id="onlineCount" style="margin-top: 5px;margin-bottom: 5px;">0</h3>
                                <div style="display: flex;flex-direction: row;">
                                    日增长<label id="onlineIncreaseRatio" style="margin-left: 5px;">0%</label>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs3">
                            <div class="layui-bg-blue"
                                 style="margin-left: 10px;
                                    height: 120px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center">
                                <h5>在线时长(小时)</h5>
                                <h3 id="onlineTime" style="margin-top: 5px;margin-bottom: 5px;">0</h3>
                                <div style="display: flex;flex-direction: row;">
                                    日增长<label id="onlineTimeIncreaseRatio" style="margin-left: 5px;">0%</label>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs3">
                            <div class="layui-bg-blue"
                                 style="margin-left: 10px;
                                    height: 120px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center">
                                <h5>新增付费用户数</h5>
                                <h3 id="paymentCount" style="margin-top: 5px;margin-bottom: 5px;">0</h3>
                                <div style="display: flex;flex-direction: row;">
                                    日增长<label id="paymentIncreaseRatio" style="margin-left: 5px;">0%</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab layui-tab-brief" lay-filter="tab-nav"
                         style="margin-top: 40px;
                         display: flex; align-content: center">
                        <label>小时指标</label>
                        <ul class="layui-tab-title" >
                            <li class="layui-this">
                                <a >注册用户数</a>
                            </li>
                            <li >
                                <a >在线用户数</a>
                            </li>
                            <li >
                                <a >在线时长(小时)</a>
                            </li>
                            <li >
                                <a >新增付费用户数</a>
                            </li>
                            <li >
                                <a >新用户付费率</a>
                            </li>
                        </ul>
                    </div>

                    <div id="mcharts"
                         style="width: 100%;
                                height: 300px;
                                margin: 20px 20px 40px 20px;display: flex;">

                    </div>
                    <h5 style="margin-left: 10px; margin-top: 40px;">详细数据</h5>
                    <table class="layui-table-body"  id="detailData" lay-data="{id:'detailData'}"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script  src="${ctxPath}/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctxPath}/static/dist/echarts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctxPath}/static/dist/echarts.common.min.js" charset="utf-8"></script>
<script  src="${ctxPath}/static/modular/vpnUtil.js" charset="utf-8"></script>
<script src="${ctxPath}/static/modular/vpn_real_time_data/vpnRealTimeData/vpnRealTimeData.js"></script>
@}
